
一. css预处理器
1.什么是css预处理器:
    扩展了css语言,包含(变量,运算,函数),使css更易维护和扩展
1.less  中文网:http://lesscss.cn/
a》编译:
    node    1-1
        1.npm install -g less 
        2.编译成未压缩版:lessc style.less styles.css   
        编译成压缩版:lessc  -x  style.less styles.css    
    工具     1-2
        http://koala-app.com/
b》语法      1-3
    变量:@变量名称:值
    运算:+ - * /
    自定义函数:.fn(形参){}.fn(实参)
    叠加:ul{li{span{}}}
    &:ul{&:hover{}}
**注意：虽然浏览器支持.less的文件,但是less文件的写入变量..就不支持了
必须要把.less文件编译成.css文件
2.sass
a》sass和scss区别
    sass语法:
    #box
        background:red
    scss语法:
    #box{
        background:red;
    }
b》编译:
    node
        1.windows系统必须安装ruby    ruby -v
        2.命令:
            安装:gem install sass
            编译成未压缩版:sass style.scss style.css
            编译成压缩版:sass --style compressed style.scss style.css
            监听:sass --watch  style.scss:style.css
    工具
c》语法
    变量:$变量名称:值 
    运算:+ - * /
    嵌套:ul{li{span{}}}
    &:ul{&:hover{}}
    自定义函数:@function fn($fz:50px){
                @return $fz;
              }
              fn();
*******less和scss区别*******
语法不同: less==>@            sass==>$
基于不同: less==>JavaScript   sass==>ruby


二.HTML5_简介
1.HTML5了解
    IE8及下版本不支持，其他浏览器都支持
    增加了ji引擎
    文档声明 <!DOCTYPE html>
    语义化 
2.HTML5废除标签
    1》能用css代替的元素
    basefont、big、center、font、s、strike、tt、u。
    2》不再使用frame框架。
    frameset、frame、noframes。
    3》只有部分浏览器支持的元素
    applet、bgsound、blink、marquee等标签。
3.HTML5新增标签
    <header></header>   头部
    <footer></footer>   底部
    <nav></nav>         导航
    <section></section> 区块
    <article></article> 定义文章
    <aside></aside>     文章侧栏
    <canvas></canvas>   定义图像
    <audio src="" controls=""></audio>  定义声音
    <datalist><option value=""></option></datalist>  定义选项列表
    <mark></mark>       定义有记号的文本
    <progress></progress>  定义进度条
    <picture>
        <source>        定义媒介源
    </picture>
    <time></time>       定义时间
    <video src=""></video>  定义视频
****块级元素
4.HTML5属性
    自定义属性:data-*,data-toggle
    内容可编辑属性:contenteditable
    tab键次序:tabindex


三.HTML5_表单
1.输入类型
    email
    url
    number
    range
    Data pickers
        date :选取日、月、年
        month :选取月、年
        week : 选取周和年
        time : 选取时间(小时和分
        datetime : 选取时间、日、月、年(UTC时间)
        datetime-local :选取时间、日、月、年(本地时间)
    search
    color

2.元素属性
    step 步长值
    max  最大值
    min  最小值
    autofocus   获取焦点
    multiple    选取多个值
    pattern     配合正则使用的
    placeholder 提示信息
    required    必须填写

四.案例——注册页面
    
五.HTML5_canvas_使用
1.canvas是什么？
    1》是一个html5新增的标签
    2》是一个画布，可以通过js的api添加图案
2.canvas能做什么？使用场景
    应用场景：做游戏 画图案
3.canvas使用
    1》<canvas></canvas>
    2》创建一个2d的对象:getContext("2d")
    3》绘画内容
————ps:3d需要插件支持
4.有填充
    fillStyle  ==>颜色
    fillRect   ==>位置大小
5.无填充
    strokeStyle
    strokeRect
**********
canvas画布的宽度和高度，一般都在js中定义，如果在css中定义宽度和高度，内部元素也会受到影响
6.画线条
    1》起始点:moveTo(x,y);
    2》结束点:lineTo(x,y);
    3》开始画:stroke()
    辅助：
    线条加粗：2d.对象.lineWidth=5
    线条颜色：2d.对象.strokeStyle="red"
    填充颜色：2d.对象.fillStyle="red";
             2d.对象.fill();   ==>加入此方法才可以填充

六.HTML5_canvas_方法
1.beginPath:方法开始一条路径，或重置当前路径

2.closePath:方法创建从当前点到开始点的路径

3.arc()
    2d.对象.arc(x,y,r,sAngle,eAngle,counterclockwise);
    x:横向位置
    y:垂直位置
    r:半径
    sAngle:起始点
    eAngle:结束点
    counterclockwise:方向
    false顺时针   true逆时针

七.HTML5_canvas_案例_太极图
八.HTML5_canvas_案例_钟表
九.HTML5_canvas_案例_折线图

十.HTML5_WebStorage 
本地储存 localStorage , sessionStorage
1.设置
    xxx.setItem('key','value');
    xxx.key='value';
    xxx['key']='value';
2.获取
    xxx.getItem(key)
    xxx.key
    xxx['key']
3.删除
    删除某一个:xxx.removeItem('key')
    全部删除:xxx.clear()
4.localStorage和sessionStorage区别
    localStorage   ==>永久性
    sessionStorage ==>关闭浏览器自动消失
******注意点******
本地存储的所有值都是string类型(字符串)

十一.HTML5_WebStorage_案例_移动app收藏效果

十二.HTML5_audio 
1.兼容问题
<audio src="">
    <h1>您的浏览器不支持</h1>
</audio>
2.属性
    src      ==>音频的url
    controls ==>显示控件
    loop     ==>循环播放
    autoplay ==>自动播放
    preload  ==>页面加载时进行加载，并预备播放
3.js的api方法
    play()   ==>开始播放
    pause()  ==>暂停播放

十三.HTML5_video
1.格式
    ogg,mp4,webm
2.属性
    poster  ==>视频图
    source  ==>资源加载

十四.CSS3_选择器
1.属性选择器
CSS2:
    [属性]     ==>选取有这个属性节点
    [属性=值]  ==>选取这个属性等于这个值的节点
    [属性~=值] ==>选取这个属性包含这个值的节点
    [属性|=值] ==>选取这个属性以这个值开头的
CSS3:
    [属性^=值] ==>这个属性的值以什么开头的
    [属性$=值] ==>这个属性的值以什么结尾的
    [属性*=值] ==>这个属性含有这个值的

2.伪类选择器
1》用户行为(动态)CSS2
    a:link 
    a:hover 
    a:focus 
    a:visited
2》UI元素状态伪类选择器CSS3
    :enabled   ==>启用的
    :disabled  ==>禁用的
    :checked   ==>选中的
3》结构伪类选择器(nth选择器)   14-2-1
    :first-child    ==>选取第一个子元素
    :last-child     ==>选取最后一个子元素
    :nth-chlid      ==>选取特定元素(从头开始)
    :nth-last-chlid ==>选取特定元素(从后开始)
注意:
nth-chlid(2)    ==>从1开始
nth-chlid(2n)   ==>倍数
****nth-chlid中的n是0****
nth-chlid(n+5)  ==>选取大于等于5的
nth-chlid(-n+5)  ==>选取小于等于5的

    :first-of-type
    :last-of-type
    :nth-of-type
    :nth-last-of-type
根据类型来选择器第几个子元素

    :only-child   ==>父元素唯一子元素
    :only-of-type ==>上级元素的唯一一个相同类型的子元素
    父元素下不管有多少元素，只要只有一个p,div,span...就可以选取到
    :empty        ==>没有内容


十五.CSS3_after和before基本使用
1.在页面中插入内容(伪元素)
    ::after 
    ::before
2.插入文本
    :before{content: "前面";}
3.插入图片
    :after{content: url(图片路径);}
4.计数器

十六.CSS3_after和before使用场景
清除浮动
    :after{
        content: "";
        display: table;
        clear: both;
    }

十七.CSS3_文字阴影
    text-shadow:水平距离 垂直距离 模糊距离 颜色值(前两个必选5)

十八.CSS3_背景
CSS3 --->支持一个容器多个背景图
    background-clip:规定了背景的绘制区域(裁剪)
    background-orgin:规定了背景图片的定位区域(显示)
    background-size     18-2
   
十九.CSS3_边框
1.CSS3边框圆角
border-radius:10px | 10%
2.CSS3边框图案
border-image:属性:url 裁剪宽度 平铺|重复|拉伸(round|stretch|repeat)

二十.CSS3_transform
1.2D
位移
    translate(x,y) 定义 2D 转换
    translateX(x) 定义转换，只是用 x 轴的值
    translateY(y) 定义转换，只是用 y 轴的值
    translate(100px,100px)
缩放
    scale(x,y) 定义 2D 缩放转换 
    scaleX(x) 通过设置 x 轴的值来定义缩放转换
    scaleY(y) 通过设置 y 轴的值来定义缩放转换
    scale(1,1)
旋转
    rotate(angle) 定义 2D 旋转，在参数中规定角度
    rotate(45deg)
倾斜
    skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换
    skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
    skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换 
    skew(45deg,45deg)  
2.3D
注意:如果用3d效果必须加入 
    perspective 规定3d元素的透视效果
    ***perspective: 500px ===>值越大越远,越小越近
    transform-style: preserve-3d 规定被嵌套元素如何在3d空间中显示
    perspective-origin 规定3d元素的视点位置
=====================
    translate3d(x,y,z) 定义 3D 转换
    translateZ(z) 定义 3D 转换，只是用 z 轴的值
    scale3d(x,y,z) 定义 3D 缩放转换
    scaleZ(z) 通过设置 z轴的值来定义 3D 缩放转换
    rotate3d(x,y,z,angle) 定义 3D 旋转 
    rotatex(angle) 定义沿着 x 轴的 3D 旋转。
    rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

二十一.CSS3_案例_3D排版
    -ms代表【ie】内核识别码
    -moz代表火狐【firefox】内核识别码
    -webkit代表谷歌【chrome】/苹果【safari】内核识别码
    -o代表欧朋【opera 内核识别码

二十二.CSS3_动画
1.animation
    使用格式:
        关键帧
        @keyframes 动画名称{
            0%{

            }
            30%{

            }...
            100%{

            }
        }
    animation-name 规定需要绑定到选择器的 keyframe 名称 
    animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
    animation-timing-function 规定动画的速度曲线。 
    animation-delay 规定在动画开始之前的延迟。
    animation-iteration-count 规定动画应该播放的次数。
    animation-direction 规定是否应该轮流反向播放动画。
    animation: 名称 时间 速度曲线 延迟 次数 反向 ;
2.例子
3.transition
    transition: 属性 时间 速度曲线 延迟;
    transition:all(过度所有属性)
4.例子
***animation和transition区别***
animation自动触发
transition要有事件支持(点击,鼠标移入)

二十三.CSS3_案例-按钮抖动-按钮填充

二十四.CSS3_案例-条状加载动画

二十五.CSS3_案例-圆形加载动画

二十六.CSS3_案例-圆球跳起来加载中

二十七.CSS3_案例-多个球旋转的加载

二十八.H5C3_自适应布局
1.布局单位
    绝对单位 px
    相对单位
        em :针对于父元素
        rem:针对于根(html)元素
        vh:
        vw:
*******补充*****
    1》谷歌浏览器默认字体大小:16px,最小值12px
    2》 1em=16px
        10px=0.625em=62.5%em
        html{font-size: 625%;} ---100px

2.自适应布局-网页适应各种屏幕大小
移动端webapp 
    ui(美工)给的设计图大小是750
    web前端375(iphone6的尺寸下开发)
3.双飞翼布局
三栏布局
    左和右是固定300宽度
    中间内容自适应
    dom优先加载:中间内容
4.弹性盒布局
1》什么是弹性盒布局(可伸缩的盒子)
    优势:写起来比较简单
        灵活性,代码优雅
    缺点:不兼容ie和安卓低级版本
2》使用 
    容器(父元素)   28-4     
        display:flex:让容器成员是弹性的项目
        flex-direction:决定主轴是什么方向(项目的排序方向)   
            row:横向  column:纵向  row-reverse:横向翻转   column-reverse:纵向翻转
        flex-wrap: 让项目是否换行
            nowrap:不换行  wrap:换行   wrap-reverse:换行翻转
        flex-flow: direction  wrap 
    项目居中方式    28-5
        justify-content:横向盒子摆放
            flex-start:靠左  flex-end:靠右   center:水平居中
            space-between:项目两端对齐,项目之间的距离都相等
            space-around :每个项目两侧距离相等,两侧距离比项目之间的距离小一倍
        align-items:纵向盒子摆放 
            flex-start:靠上  flex-end:靠下   center:垂直居中
            baseline:项目的第一行文字为基线
            stretch:如果容器没有设置高度或者auto,则占满整个高度
    容器成员|项目(子元素)   28-6-1
        order:排序方式,数值越小,越靠前
        flex-grow:默认值0,比例放大
        flex-shrink:默认值1,比例缩小
        flex-basis:相当于width
        flex:复合(grow + shrink + basis)  默认值0 1 auto  (后两个值是可选择的)    28-6-2

二十九.H5C3_自适应布局-案例-弹性盒-圣杯布局

三十.H5C3_响应式布局(媒体查询)@media
1.什么是响应式布局:一套代码实现多种设备访问一致性(pc,平板,手机)
    优点:一直保持一个url,一套代码 
    缺点:浏览器支持程度(IE8及下版本不兼容)
2.@media 响应式布局(媒体查询)使用 
    语法格式:
        @media only screen and (max-width:700px){
        }
        only:可以排除不支持媒体查询的浏览器
        screen:设备类型
        max-width:设备特性   设备小于700像素...
        @media only screen and (max-width:300px) and (min-width:500px){
        }
3.响应式图片
    <picture>
        <source srcset="路径" media="()">
        <img srcset="">
    </picture>
    
三十一.H5C3_响应式布局案例

三十二.H5C3_移动端插件
1.zepto(js库)
    JQuery.js  ==>pc       zepto.js   ==>移动端(轻量级)
    相同点:api几乎差不多一样
    不同点:事件不同;体积大小不同


*******注意：在移动端页面中使用click事件会有300毫秒的延迟
click ===>tap
swipeLeft
swipeRight
swipeUp
swipeDown

2.iscroll.js
    iscroll.js插件是兼容所有移动端滚动条事件的插件,
    在某些安卓机中，我们无法通过overflow:scroll这个css属性来出现滚动条;
    它也可以非常好的在一个容器元素中处理滚动。

要求:
    要给滚动区域加入一个父元素
    父元素的高度值要小于滚动区块的高度
    new IScroll(".main",{
        scrollbars:true   //是否显示滚动条,默认为false
        fadeScrollbars:true  //滚动条淡入淡出效果,默认为false
        bounce:false    //滚动到达容器边界时是否执行反弹动画,默认为true
        click:true     //iscroll禁止默认鼠标的点击行为,如果要使用设置true,默认为false
    })

3.swipe(滑动)
    https://www.swiper.com.cn/
使用:
    获取到swipe.js ,swipe.css 
    先把dom元素赋值
    new Swiper
    设置功能(参数)
        new Swiper('.swiper', {
            loop:true,       ==>循环
            autoplay:true,   ==>自动播放
        })

4.图片懒加载,预加载
使用:
    引入echo.js
    在dom节点图片上加入data-echo='要加载的图片路径'
    echo.init()

三十三.H5C3_项目—WebApp-孕育宝典

三十四.H5C3_响应式布局实战
1.什么是响应式 
    可以用一套代码，来适应多种设备，让用户达到更好的访问效果
2.流程
    问题:
    1》开发的时候选择哪个宽度来写代码 
    2》首选用什么浏览器进行开发(兼容到什么地步)
    3》范围值应该是多少  大于800==>1600  480-800==>800 小于480==>480
3.谁负责切图
    ui会一点web前端知识
    web前端应该了解ui相关知识
4.还原度
    不太能还原特别极致
5.开发项目前最重要==>(沟通)
6.项目步骤
    1》html
    2》css 
    3》特效(js)
7.单位
    绝对单位:px
    相对单位:em:针对父元素 rem:针对根(html)
8.响应式图片
    img srcset  ==>缓存
    picture     ==>优势解决本身srcset的问题,缺点:不兼容IE8或者以下
    svg
    终极解决响应式图片的版本:
    <picture>
        <source srcset="img/800.webp" media="(min-width:50em)">
        <img srcset="img/400.webp" alt="">
    </picture>
    <script src="js/picturefill.js"></script>
9.网址:
ehcto.ehcto.com 